<template>
    <!-- 添加/修改商品信息的表单弹框组件 -->
    <Dialog :title="dialogConfig.title" :buttons="dialogConfig.buttons" :show="dialogConfig.show"
        @close="dialogConfig.show = false" :width="'700px'">
        <el-form ref="formDataRef" :model="formData" :rules="rules" label-width="60px">
            <el-form-item label="商品名" prop="name" label-width="90px">
                <el-input :maxLength="50" v-model.trim="formData.name" placeholder="请输入商品名" />
            </el-form-item>
            <el-form-item label="价格(分)" prop="price" label-width="90px">
                <el-input :maxLength="10" v-model.trim="formData.price" placeholder="请输入价格(分)" />
            </el-form-item>
            <el-form-item label="库存" prop="stock" label-width="90px">
                <el-input :maxLength="10" v-model.trim="formData.stock" placeholder="请输入库存" />
            </el-form-item>
            <el-form-item label="图片链接" prop="image" label-width="90px">
                <el-input :maxLength="100" v-model.trim="formData.image" placeholder="请输入图片链接" />
                <el-image alt="" :src="formData.image" style="width: 100px; height: 100px;" />
            </el-form-item>
            <el-form-item label="分类" prop="stock" label-width="90px">
                <el-input :maxLength="20" v-model.trim="formData.category" placeholder="请输入分类" />
            </el-form-item>
            <el-form-item label="品牌" prop="brand" label-width="90px">
                <el-input :maxLength="20" v-model.trim="formData.brand" placeholder="请输入品牌" />
            </el-form-item>
            <el-form-item label="描述" prop="stock" label-width="90px">
                <el-input :maxLength="100" v-model.trim="formData.spec" placeholder="请输入描述" />
            </el-form-item>
            <!-- 单选 -->
            <el-form-item label="是否推广" prop="isAD" label-width="90px">
                <el-radio-group v-model="formData.isAD">
                    <el-radio :value="1">是</el-radio>
                    <el-radio :value="0">否</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
    </Dialog>
</template>

<script setup>
import { ref, reactive, getCurrentInstance, nextTick, watch } from "vue"
import { useRoute, useRouter } from "vue-router";
const { proxy } = getCurrentInstance();
const route = useRoute();
const router = useRouter();

const dialogConfig = reactive({
    show: false,
    title: "编辑商品",
    buttons: [
        {
            type: "primary",
            text: "确定",
            click: (e) => {
                submitData();
            },
        },
    ],
});

const formData = ref({})
const formDataRef = ref()
const rules = {
    name: [{ required: true, message: "请输入商品名", trigger: "blur" },],
    price: [{ required: true, message: "请输入价格(分)", trigger: "blur" }],
    stock: [{ required: true, message: "请输入库存", trigger: "blur" }],
    image: [{ required: true, message: "请输入图片链接", trigger: "blur" },],
    category: [{ required: true, message: "请输入分类", trigger: "blur" },],
    brand: [{ required: true, message: "请输入品牌", trigger: "blur" }],
    spec: [{ required: true, message: "请输入描述", trigger: "blur" }],
    isAD: [{ required: true, message: "请选择是否推广", trigger: "change" }],
};

const emit = defineEmits(['reload'])
const submitData = () => {
    formDataRef.value.validate(async (valid) => {
        if (!valid) {
            return
        }
        let params = {}
        Object.assign(params, formData.value)
        // 新增或更新
        let result = await proxy.Request({
            method: formData.value.id == undefined ? 'post' : 'put',
            url: formData.value.id == undefined ? proxy.Api.addItem : proxy.Api.updateItem,
            params
        })
        if (!result) {
            return
        }
        proxy.Message.success('操作成功')
        dialogConfig.show = false
        emit('reload')
    })
}

const show = (data = {}) => {
    dialogConfig.show = true
    nextTick(() => {
        formDataRef.value.resetFields()
        formData.value = Object.assign({}, data)
    })
}
defineExpose({
    show,
});
</script>

<style lang="scss" scoped></style>
